<template>
  <!-- 维修人员 ==> 报修详情 -->
  <view style="padding: 30rpx;">
    <!-- 报修信息 -->
    <view>
      <view class="bxdetail">
        <view style="font-size: larger;">报修详情</view>
        <view>
          <view class="bxtitle">报修时间</view>
          <view class="bxdata">{{repair.releaseTime}}</view>
        </view>
        <view>
          <view class="bxtitle">报修区域</view>
          <view class="bxdata">{{repair.repairArea}}</view>
        </view>
        <view>
          <view class="bxtitle">报修类型</view>
          <view class="bxdata">{{repair.type}}</view>
        </view>
        <view>
          <view class="bxtitle">报修描述</view>
          <view class="bxdata">{{repair.detail}}</view>
        </view>
        <view>
          <view class="bxtitle">故障图片</view>
          <view class="bxdata" style="display: flex;flex-wrap: wrap;">
            <view v-for="(item,index) in repair.img" :key="index" @click="preview(index)" style="width: 48%;margin: 1%;">
                <image :src="item" style="width: 100%;height: 200rpx;"></image>
            </view>
          </view>
        </view>
      </view>
    </view>
    <!-- 维修说明   根据传过来的 状态 动态显示(进行中 要求输入，已完成 显示内容，若未输入显示'暂无') 隐藏（新任务）  -->
    <view v-if="repair.status!=='新任务'" class="wxshuoming">
      <view style="font-size: larger;
      border-bottom: 1rpx solid #bec1ca;
      ">维修说明</view>
      <view>
        <view v-if="repair.status==='已接单'">
          <u--input placeholder="请输入维修说明" border="bottom" v-model="shuomingvalue"></u--input>
        </view>
        <view v-if="repair.status==='已维修' || repair.status==='已评价'">{{repair.finishState}}</view>
      </view>
    </view>
    <!-- 根据传过来的 状态 动态显示 隐藏 -->
    <view v-if="repair.status==='新任务'" class="submit" @click="acceptRepair">接单</view>
    <view v-if="repair.status==='已接单'" class="submit" @click="finishRepair">完成提交</view>
    <!-- 业主评价 -->
    <view v-if="repair.status==='已维修'" class="submit" style="background-color: #ffff00;color: #000000;">还未评价，邀请业主评价吧~</view>
    <view v-if="repair.status==='已评价'">
      <!-- 星级 -->
      <view class="title"  style="font-size: larger;
                                  border-bottom: 1rpx solid #bec1ca;">业主评价</view>
      <view style="background-color: #FFFFFF;
                   padding-top: 30rpx;
                   display: flex;
                   justify-content: space-around;">
        <u-rate :count="count" v-model="repair.evaluateStar" disabled="true" gutter="10" size="80rpx"></u-rate>
        <view style="padding-top: 20rpx;width: 120rpx;color: #959595;">{{startext[repair.evaluateStar-1]}}</view>
      </view>
      <!-- 描述 -->
      <view class="title"  style="font-size: larger;
                                  border-bottom: 1rpx solid #bec1ca;">评价描述</view>
      <view style="padding: 30rpx;">{{repair.evalueteDetail}}</view>
    
    </view>
  </view>
</template>

<script>
  // 按需导入 mapState ,mapMutations,mapGetters 辅助函数
  import { mapState,mapMutations,mapGetters} from 'vuex'
  export default {
    data() {
      return {
        shuomingvalue: '',
        repair:{},
        count: 5,//最多几颗星
        starvalue: 5,//实际几颗星  5只是初始化，具体应该从数据库获取再改变这个值
        startext:['非常差','差','一般','好','非常好'],//星对应的描述等级
        assessdetail: '',//评价描述
      };
    },
    computed: {
      // 将 m_user 模块中的 userType 数据映射到当前页面中使用
      ...mapState('m_user', ['userType','userInfo']),
    },
    onLoad(option){
      this.getRepairById(option.id);
    },
    methods: {
      async getRepairById(id){
        const {data: res} = await uni.$http.post('/repair/getrepairbyid',id)
        if (res.status !== 200) return uni.$showMsg()
        console.log(res.data)
        // 图片url处理
        var tempRepair=res.data;
        var imgArr= tempRepair.img.split(";");
        tempRepair.img=[];
        for(var i=0;i<imgArr.length-1;i++){//为了除去最后一个空的，所以是i<imgArr.length-1
          tempRepair.img[i]=imgArr[i];
        }
        this.repair=tempRepair;
      },
      async acceptRepair(){
        var runningRepair={};
        runningRepair.id=this.repair.id;
        runningRepair.releaseTime=this.repair.releaseTime;
        runningRepair.repairArea=this.repair.repairArea;
        runningRepair.type=this.repair.type;
        runningRepair.detail=this.repair.detail;
        var imgAarr=this.repair.img;
        var imgStr='';
        for(var i=0;i<imgAarr.length;i++){
          imgStr += imgAarr[i] + ';'
        }
        runningRepair.img=imgStr;
        runningRepair.status='已接单';
        runningRepair.workerId=this.userInfo.id;
        // runningRepair.acceptTime=uni.$getDateTime();//调用自己封装好的获取当前时间并格式化的方法
        runningRepair.acceptTime=uni.$getDateTime(new Date());
        const {data: res} = await uni.$http.put('/repair/updaterepair',runningRepair)
        if (res.status !== 200) return uni.$showMsg()
        console.log(res.data.isok)
        if(res.data.isok===false){
          uni.$showMsg("接单失败，手速慢了~ 报修单被其他人抢先接单了")//原因是加了乐观锁，就是为了防止两个人重复接单的问题
        }else{
          uni.$showMsg("接单成功，联系上门维修吧~")
          setTimeout(() => {
            uni.switchTab({
              url: '/pages/weixiu-people/weixiu-people'
            })
          }, 2000)
        }
      },
      async finishRepair(){
        var finishRepair={};
        finishRepair.id=this.repair.id;
        finishRepair.releaseTime=this.repair.releaseTime;
        finishRepair.repairArea=this.repair.repairArea;
        finishRepair.type=this.repair.type;
        finishRepair.detail=this.repair.detail;
        finishRepair.acceptTime=this.repair.acceptTime;
        var imgAarr=this.repair.img;
        var imgStr='';
        for(var i=0;i<imgAarr.length;i++){
          imgStr += imgAarr[i] + ';'
        }
        finishRepair.img=imgStr;
        finishRepair.status = '已维修';
        finishRepair.finishState = this.shuomingvalue !== '' ? this.shuomingvalue : '无';//维修说明  若未填写，则为无
        // finishRepair.finishTime=uni.$getDateTime();//调用自己封装好的获取当前时间并格式化的方法
        finishRepair.finishTime=uni.$getDateTime(new Date());//完成报修提交时间
        const {data: res} = await uni.$http.put('/repair/updaterepair',finishRepair)
        if (res.status !== 200) return uni.$showMsg()
        console.log(res.data.isok)
        if(res.data.isok===false){
          uni.$showMsg("出错了，再试一次吧")//原因是加了乐观锁，就是为了防止两个人重复接单的问题
        }else{
          uni.$showMsg("维修完成，邀请业主评价吧~")
          setTimeout(() => {
            uni.switchTab({
              url: '/pages/weixiu-people/weixiu-people'
            })
          }, 2000)
        }
      },
      // 实现图片的预览效果
      preview(index) {
        // 调用 uni.previewImage() 方法预览图片
        uni.previewImage({
          // 从指定下标开始预览
          current:index,
          // 所有图片 url 地址的数组
          urls: this.repair.img
        })
      },
    }
  }
</script>

<style lang="scss">
  .bxdetail,
  .wxshuoming,
  .bxjindu {
    background-color: #FFFFFF;
    padding-top: 30rpx;
  }

  .bxdetail>view,
  .wxshuoming>view {
    display: flex;
    margin: 20rpx;
  }

  .wxshuoming>view,
  .bxjindu>view {
    padding-bottom: 30rpx;
  }

  .bxtitle {
    width: 40%;
    color: #93969d;
  }

  .bxdata {
    width: 60%;
  }

  .submit {
    background-color: #1599FD;
    color: #FFFFFF;
    font-weight: bold;
    text-align: center;
    border-radius: 15rpx;
    line-height: 100rpx;
    height: 100rpx;
  }
  
  .title {
    background-color: #FFFFFF;
    padding-top: 30rpx;
    padding-left: 20rpx;
  }
  
  .title>view{
    display: flex;
    margin: 20rpx;
    padding-bottom: 30rpx;
  }
</style>
